<template>
  <div class="movie-list">
    <el-row :gutter="20">
      <el-col :span="6" v-for="movie in movies" :key="movie.id">
        <el-card
          :body-style="{ padding: '0px' }"
          @click="handleCardClick(movie)"
          class="movie-card"
        >
          <img :src="movie.poster" class="image" />
          <div style="padding: 14px">
            <span>{{ movie.title }}</span>

            <div class="bottom">
              <el-rate
                v-model="movie.rating"
                disabled
                show-score
                text-color="#ff9900"
              ></el-rate>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "MovieList",
  data() {
    return {
      movies: [
        // 假设数据
        {
          id: 1,
          title: "《毒液：最后一舞》",
          poster:
            "https://img.379973.xyz/wp-content/uploads/2024/07/1b747cc0bf6510ea04c068c836dd0acb.jpg",
          rating: 8.8,
          synopsis:
            "毒液和埃迪（汤姆·哈迪 Tom Hardy 饰）迎来至暗时刻。一边是人类神秘组织的穷追猛打，一边是外星共生体大军入侵地球，他们一心同体，花式解锁海陆空作战新形态。面对两边的疯狂追捕，这对亡命搭档将被迫做出毁灭性决定，为他们的最后一舞拉下帷幕。",
          type: "动作 / 科幻 / 惊悚 / 冒险",
          duration: "2024-10-23(中国大陆) / 2024-10-25(美国) 109分钟",
        },
        {
          id: 2,
          title: "《乔妍的心事》",
          poster:
            "https://i10.hoopchina.com.cn/hupuapp/bbs/903/38859903/thread_38859903_20241020193300_s_646994_o_w_2000_h_2801_86498.jpg?x-oss-process=image/resize,w_800/format,webp",
          rating: "暂无评分",
          synopsis:
            "边陲小镇长大的乔妍（赵丽颖 饰）打拼多年之后成为了一名知名演员，但在重重压力之下，一路走来小心翼翼。随着一条匿名的勒索消息，让一桩尘封往事成为她新的阴影。同时，多年前失联的姐姐（辛芷蕾 饰）突然现身，事情看似巧合，但背后又暗藏更大的危机。",
          type: "剧情 / 悬疑",
          duration:
            " 2024-10-26(中国大陆) / 2024-10-28(东京国际电影节) 112分钟",
        },
        {
          id: 3,
          title: "《蓦然回首》",
          poster:
            "https://tse4-mm.cn.bing.net/th/id/OIP-C.mfOgMMC7eI-vuW5Af5ycDAHaKd?rs=1&pid=ImgDetMain",
          rating: 9.2,
          synopsis:
            "这是一个令人怦然心碎的感人至深的有关于青春、梦想和友谊的故事。自信的小学生藤野一直以来都在校报上连载四格漫画，也因此享受着同学们的追捧赞美，直到她意外得知一个“家里蹲”不上学的同学京本，也想要尝试在校报上刊登漫画。这两个截然不同的女孩，她们之间唯一的联系就是对漫画的热爱。然而，有一天，在她们之间发生了一些事情，让一切都改变了……",
          type: "剧情 / 动画",
          duration:
            "2024-10-26(中国大陆) / 2024-06-10(安纳西国际动画电影节) / 2024-06-14(上海国际电影节) / 2024-06-28(日本) 75分钟(中国大陆) / 58分钟",
        },
        {
          id: 4,
          title: "《志愿军：存亡之战》",
          poster:
            "https://x0.ifengimg.com/ucms/2023_16/C99FC1BC3334C763DB8DD03648B4F8EBED954A31_size6441_w2000_h3000.jpg",
          rating: 8.3,
          synopsis:
            "影片聚焦铁原阻击战。1951年5月，中国人民志愿军第63军刚刚结束了持续一个月的作战，就受命进驻铁原战场，正面对抗“联合国军”4个师。志愿军将士们浴血奋战，终于把敌军打上了谈判桌。为了完成任务，63军189师的战士化整为零，把自己变成一根钉子，牢牢钉在阵地上。1营阵地上，身为营教导员的李想（朱一龙 饰）立下“一步也不会再退”的誓言，死守阵地。炮火连天中，李默尹（辛柏青 饰）一家三口在战场上团聚，一把钥匙，一顿战壕中的团圆饭，让这个因战争分离的小家更为亲密。为了给新中国造出更好的武器，归国军工专家吴本正（朱亚文 饰）在张孝恒（欧豪 饰）的保护下进入战场。身为警卫员的张孝恒坚信，守住了吴本正，就是守住了祖国的未来。孙醒（陈飞宇 饰）、杨三弟（张宥浩 饰）也纷纷来到铁原。63军全体将士一起，在铁原战场上筑成了一道冲不破的“铁长城”！",
          type: "剧情 / 历史 / 战争",
          duration: "2024-09-30(中国大陆) 144分钟",
        },
        {
          id: 5,
          title: "《浴火之路》",
          poster:
            "https://imgcdn.scol.com.cn/media/2024/10/18/214030863836.jpg",
          rating: "暂无评分",
          synopsis:
            "崔大路（肖央 饰）、李红樱（赵丽颖 饰）、赵子山（刘烨 饰），三位丢了孩子的父母因一桩交易而彼此牵连；他们眼里没魂儿，心中有恨，各怀目的，组局踏上寻子复仇之路，在蛮荒之地上演一场离奇又凶险的绝杀。",
          type: "剧情 / 犯罪",
          duration: "2024-10-01(中国大陆) 126分钟",
        },
        {
          id: 6,
          title: "《749局》",
          poster:
            "https://n.sinaimg.cn/sinakd20230611ac/57/w690h967/20230611/70ef-004e2cacf7c1d94c72450312f3fd077c.jpg",
          rating: 2.8,
          synopsis:
            "故事发生在近未来，因为未知神秘生物的出现，导致整个城市面临前所未有的危机。一桩被隐藏多年的秘密计划浮出水面。少年马山（王俊凯 饰）被带入749局，进入层层迷宫，开启一程冒险之旅，并在这一旅程中完成了一次自我的成长与救赎。",
          type: "动作 / 科幻 / 冒险",
          duration: "2024-10-01(中国大陆) 123分钟",
        },
        {
          id: 7,
          title: "《鸳鸯楼.惊魂》",
          poster:
            "https://n.sinaimg.cn/sinakd20241022s/486/w536h750/20241022/5ee6-c504131f537602154e4867edbb584949.jpg",
          rating: "暂无评分",
          synopsis:
            "躺在棺材里的那张脸，和她一模一样......一幢“鬼”气弥漫的鸳鸯楼，一群心怀“鬼”胎的人，一场恶“鬼”作祟的阴阳死局。在阴宅里住满7天就能平分死者700万保金，沈言（李梦 饰）与男友刘振中（苏小玎 饰）等人一同住进鸳鸯楼，谁料楼内怪事频发，噩梦、幻听、深夜的哭声、墙上的血脚印……头七回魂夜，恶鬼索命时，他们能否从鸳鸯楼里活着走出来......",
          type: " 悬疑 / 惊悚 / 恐怖",
          duration: "2024-10-31(中国大陆) 95分钟",
        },
        {
          id: 8,
          title: "《焚城》",
          poster:
            "https://p3-pc-sign.douyinpic.com/tos-cn-i-0813c000-ce/oIxxYM4jZQaAj2nLAAwAhAIUPuuEiPAEBA1iI~noop.jpeg?biz_tag=pcweb_cover&from=327834062&s=PackSourceEnum_SEARCH&se=false&x-expires=1731697200&x-signature=Ch5ixeOvVxiyCu73Sal9QdEJ07c%3D",
          rating: 9.2,
          synopsis:
            "危险物质突发泄漏！24小时后危及香港全城。如何及时阻止这场末日灾难，专家范伟立（刘德华 饰）与Cecilia（莫文蔚 饰）各执一词。同时，消防队长黎杰峰（白宇 饰）和队友已奉命奔赴未知前线。随着末日的逼近，富商的黑色利益链也逐渐浮出水面，独享财富却要平摊灾难，这次危机究竟要如何才能化解？",
          type: "剧情 / 动作 / 灾难",
          duration: "2024-11-01(中国大陆) 136分钟",
        },
        // 可以从API获取更多电影数据
      ],
    };
  },
  methods: {
    handleCardClick(movie) {
      console.log(movie);
      this.$router.push({
        name: "moviedetail",
        query: {
          id: movie.id,
          title: movie.title,
          poster: movie.poster,
          rating: movie.rating,
          synopsis: movie.synopsis,
          type: movie.type,
          duration: movie.duration,
        },
      });
    },
  },
};
</script>

<style scoped>
.movie-list .el-col {
  margin-bottom: 20px;
}

.movie-card {
  cursor: pointer;
}

.image {
  width: 100%;
  display: block;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}
</style>